import React, { Component, PropTypes } from 'react';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import { Link } from 'dva/router';
import GroupTab from '../components/UserGroup/GroupTab';
import UserForm from '../components/UserGroup/UserForm';
import TableList from '../components/TableList';
import styles from './UserGroup.less';
import MainLayout from '../components/MainLayout/MainLayout';
import {Row, Col,Tooltip,Icon,Form, Input, Select, Checkbox, Radio,Cascader,Modal,Spin} from 'antd';

class UserGroup extends Component {
	  constructor(props) {
	      super(props);
	      this.state = {
		      	isshowModal : false,
		      	formObj:(<div style={{textAlign:'center',margin:'50px 0 80px 430px'}}><Spin /></div>),
		      	tableList:""
	      }
	  }

	  fetchData(type, search){
	      this.props.dispatch({
	              type: type,
	              payload: search
	      })
	    };

	   onPageChange(page) {
	      	this.fetchData("homePage/groupTabQuery","pageSize=10&pageNum="+page)
	    }

	    initData(){
	    	this.fetchData("homePage/groupTabQuery","pageSize=10&pageNum=1")
	    }

	    componentWillMount() {
	    	this.initData();
	    };

	    closeModel(){
	    	this.setState({'isshowModal':false});
	    }

	    onEditItem(itemId) {
	    	this.fetchData("homePage/findGroupById",'id='+itemId);// 获取当前选择的群组详细信息
	    	window.localStorage.setItem("gid", itemId);
	    	this.setState({isshowModal:true});
		setTimeout(()=>{
			let temp = this.props.homePage.groupInfoData;
	        	if(temp){
	        		let cond = JSON.parse(temp.customcondition);
	        		this.setState({
	        			formObj:(<UserForm func={this.closeModel.bind(this)} editId={itemId} usergroupname={temp.usergroupname} userType={temp.contactinfromation} ival1={cond.ival1} ival2={cond.ival2} ival3={cond.ival3} ival4={cond.ival4} ival5={cond.ival5} ival6={cond.ival6} />),
	        			tableList:(<TableList pageSize={10} groupInfo={temp.customcondition} />)
	        		});
			}
	        }, 3500);
	    };

	    onDeleteItem(id){
	    	this.fetchData('homePage/delGroupById', 'id='+id);
	    }

	render(){
	  return (
	    <MainLayout isShowLeft="showGroup">
		    <div className={styles.wrap}>
		      <Row type="flex" justify="space-between" gutter={16} className="top_tit">
			      <Col span={8}>
			      	<a href="#">生命周期</a>
			      </Col>
			      <Col span={8}>
			      <Link to="/MemberLevel">会员等级</Link>			      	
			      </Col>
			      <Col span={8}>
			      	<Link to="/UserGroup" className="on">自定义用户组</Link>
			      </Col>
			    </Row>
			    <div className={styles.ui_wrap}>
			    	<h3 className={styles.ui_tit}>
			    		用户群组&nbsp;
			    		<Tooltip placement="right" title="用户群组是指根据用户标签组合筛选出的特定的人群用户">
				          <Icon type="question-circle-o" className={styles.anticon}/>
				        </Tooltip>
			    	</h3>
			    	<div className={styles.chart_box}>
					    <GroupTab data={this.props.homePage.groupTabData} gpagination={this.props.homePage.gpagination} onEditItem={this.onEditItem.bind(this)} onDeleteItem={this.onDeleteItem.bind(this)} onPageChange={this.onPageChange.bind(this)}/>
			    	</div>
			    </div>

			<Modal className={"user_pop"} title="" wrapClassName="vertical-center-modal" visible={this.state.isshowModal} onCancel={() => this.setState({'isshowModal':false})}>
		          		<div className={styles.chart_box}>
			    		<Row>
					      <Col span={12}>
					      		{this.state.formObj}
					      </Col>
					      <Col span={12}>
					      		{this.state.tableList}
					      </Col>
					</Row>
			    	</div>
		        </Modal>
		    </div>		    
	    </MainLayout>
	  );
	}
}

function mapStateToProps({ homePage }) {
  return {
    homePage: {...homePage},
  };
}

export default connect(mapStateToProps)(UserGroup);